<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title">checkbox多选框</view>
		</view>
		<view class="uni-padding-wrap uni common-mt">默认样式</view>
		<view>
			<checkbox-group>
				<label>
					<checkbox value="cb1" checked="true" />选中
				</label>
				<label>
					<checkbox value="cb"/>未选中
				</label>
			</checkbox-group>
		</view>
		<view class="uni-title uni-common-mt"不同颜色和尺寸的checkbox></view>
		<view>
			<checkbox-group>
				<label>
					<checkbox value="cb1" checked="true" color="#007AFF" style="transform: scale(0.7);"/>选中
				</label>
				<label>
					<checkbox value="cb" color="#ffcc33" style="transform: scale(0.7)" />未选中
				</label>
			</checkbox-group>
		</view>
	</view>
	<view class="uni-padding-wrap">
		<view class="uni-title uni-common-mt">
			<text>\n使用uni-list布局</text>
		</view>
	</view>
	<view class="uni-list">
		<checkbox-group @change="checkboxChange"
		<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="items.value">
			<view>
				<checkbox :value="item.value" :checked="item.checked" />
				<view>{{item.name}}</view>
				</checkbox>
			</view>
		</label>
		</checkbox-group>
	</view>
</template>

<script>
	export default{
		data{
			return(){
				title:'checkbox 复选框',
				items:[{
					value:'uea',
					name:'美国'
				},
				{   value:'china',
					name:'中国',
					checked:'true'
					
				},
				{   value:'bra',
					name:'巴西'},
				{   value:'jpn',
					name:'日本'},
					]
			}
		},
		methods:{
			checkboxChange:function(e){
				var items = this.items,
				    value = e.detail.value;
				for(var i = 0,lenI = items.length; i< lenI; ++i){
					const item = items[i]
					if(values.indexof(item.value)>=0{
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked'false)
					}
				}
			}
		}
	}
</script>

<style>
.uni-list-cell {
	justify-content: flex-start
}
</style>
